<template>
    <a-drawer
      title="查看该用户具体得分情况"
      placement="right"
      :closable="false"
      width="500"
      v-model:visible="visible"
    >
      <div class="top">
        <div class="top__title">该用户的总体得分情况：</div>
        <div class="top__items">
          <div class="top__items__item">最高得分：{{ summary.max }}</div>
          <div class="top__items__item">最低得分：{{ summary.min }}</div>
          <div class="top__items__item">平均得分：{{ summary.avg }}</div>
        </div>
      </div>
      <a-table
        :columns="columns"
        :data-source="data"
        rowKey="score_by"
        :scroll="{ y: '70vh' }"
        :pagination="false"
      >
      <template #time='{text}'>
        {{text.substring(0, 10)}}
      </template>
      </a-table>
    </a-drawer>
  </template>
  <script lang="ts">
  import { defineComponent, onUpdated, ref, Ref } from "vue";
  import { get } from "../utils/request/request";
  
  const columns = [
    {
      title: "打分人",
      dataIndex: "score_by",
      align: "center",
    },
    {
      title: "分数",
      dataIndex: "score",
      align: "center",
    },
    { title: "打分时间", dataIndex: "score_at", align: "center",slots: { customRender: "time" }, },
  ];
  
  interface DataItem {
    score: number;
    score_by: string;
    score_at: string;
  }
  
  interface SummaryData {
    max: number;
    min: number;
    avg: number;
  }
  
  const data: Ref<DataItem[]> = ref([]);
  
  const summary: Ref<SummaryData> = ref({
    max: 0, //最高分
    min: 0, //最低分
    avg: 0, //平均分
  });
  
  //drawer
  const useDrawerEffect = () => {
    const visible = ref<boolean>(false);
    const showDrawer = () => {
      visible.value = true;
    };
    return { visible, showDrawer };
  };
  
  //网络请求
  const useHttpEffect = (interviewId: string, appUserId: string) => {
    const token: string = localStorage.getItem("token") as string;
    const getData = async () => {
      const res: any = await get(
        `/admin/api/v1/recruitment/interview/${interviewId}/score?app_user_id=${appUserId}`,
        token
      );
      console.log(res);
      data.value = res?.data?.scores;
      summary.value = res?.data?.summary;
    };
    return { getData };
  };
  
  export default defineComponent({
    props: ["interviewId", "appUserId"],
    setup(props) {
      const interviewId = ref<string>(props.interviewId);
      const appUserId = ref<string>(props.appUserId);
      const { visible, showDrawer } = useDrawerEffect();
      const { getData } = useHttpEffect(interviewId.value, appUserId.value);
  
      onUpdated(() => {
        if (visible.value) {
          getData();
        }
        console.log(appUserId)
      });
      return {
        columns,
        data,
        summary,
        interviewId,
        appUserId,
        visible,
        showDrawer,
      };
    },
  });
  </script>
  
  <style lang="less" scoped>
  .top {
    &__title {
      font-weight: bold;
      font-size: 18px;
      padding-bottom: 5px;
    }
    &__items {
      display: flex;
      width: 100%;
      padding-bottom: 20px;
      &__item {
        flex: 1;
      }
    }
  }
  </style>
  
  